<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>图片剪裁</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #000;
        }

        .footer-bar {
            width: 100%;
            height: 3rem;
            position: fixed;
            bottom: 0;
            padding-bottom: 2rem;
            /*background: #888;*/
            /*border-top: 1px solid #fff;*/
        }

        .footer-bar span {
            display: block;
            height: 1;
            width: 4rem;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 1rem;
        }

        .footer-bar .left {
            float: left;
        }

        .footer-bar .right {
            float: right;
        }
    </style>
</head>

<body>
    <footer class="footer-bar" id="footerBar">
        <span class="left" onclick="fnCancleClip()" tapmode>取消</span>
        <span class="right" onclick="fnSaveImg()" tapmode>完成</span>
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/service/service-app.js"></script>
<script type="text/javascript" src="../script/service/service-tool.js"></script>
<script type="text/javascript" src="../script/service/service-font.js"></script>
<script type="text/javascript" src="../script/service/service-user.js"></script>
<script type="text/javascript" src="../script/service/service-pic.js"></script>
<script type="text/javascript">
    var oFNImageClip;
    var $S;
    var USER;
    var vFooterH;
    apiready = function() {
        USER = USER();
        $S = SERVICE();
        fnInitAliYunOss();
        fnInitPage();
    };
    /**
     *  页面初始化
     **/
    function fnInitPage() {
        $S.ShowProgress();
        var tFooter = $api.byId('footerBar');
        var tFooterH = $api.offset(tFooter).h;

        vFooterH = tFooterH;
        setTimeout(function() {
            $S.CloseProgress();
            fnGetClipRect(); //获取当前屏幕的宽度,打开剪裁器
        }, 300)
    }
    /**
     *  获取当前屏幕的宽度
     **/
    function fnGetClipRect() {
        var tW = api.frameWidth - 80;
        var tH = api.frameWidth - 80;
        var tX = 40;
        var tY = (api.frameHeight - vFooterH - api.frameWidth + 80) / 2;
        var tParam = {
            w: tW,
            h: tH,
            x: tX,
            y: tY
        }
        fnOpenClip(tParam)
    }

    /**
     *   打开图片剪裁模块
     **/

    function fnOpenClip(pParam) {
        $S.ShowProgress();
        oFNImageClip = api.require("FNImageClip");
        oFNImageClip.open({
            rect: {
                x: 0,
                y: 0,
                w: api.frameWidth,
                h: api.frameHeight - vFooterH
            },
            srcPath: api.pageParam.picUrl,
            highDefinition: true,
            style: {
                mask: '#000',
                clip: {
                    w: pParam.w,
                    h: pParam.h,
                    x: pParam.x,
                    y: pParam.y,
                    borderColor: '#fff',
                    borderWidth: 1,
                    appearance: 'rectangle'
                }
            },
            mode: 'image',
            fixedOn: api.frameName
        }, function(ret, err) {
            $S.CloseProgress();
        });
    }

    /**
     *  保存图片
     **/
    function fnSaveImg() {
        $S.ShowProgress();
        setTimeout(function() {
            var savePath = 'fs://image/' + new Date().getTime() + 'result.jpg';
            oFNImageClip.save({
                destPath: savePath,
                copyToAlbum: false,
                quality: 0.5
            }, function(ret, err) {
                if (ret) {
                    if (ret.destPath != 'undefined') {
                        fnUploadObsFile(ret.destPath, function(img) {
                            $S.CloseProgress();
                            console.log(img);
                            api.sendEvent({
                                name: 'setAvatar',
                                extra: {
                                    avatar: img,
                                }
                            });
                            fnCloseCurrentPage();
                        })
                    }
                } else {
                    $S.CloseProgress();
                    api.toast({
                        msg: '头像保存失败',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            });
        }, "150")
    }
    /**
     *  关闭当前页面
     **/
    function fnCloseCurrentPage() {
        oFNImageClip.close();
        api.closeWin();
    }
    /**
     *  取消剪裁
     **/
    function fnCancleClip() {
        oFNImageClip.close();
        setTimeout(function() {
            api.closeWin();
        }, 30)
    }
</script>

</html>
